<template>
	<button
	  v-if="goodsCartBtnShow"
	  open-type="getUserInfo"
	  hover-class="none"
	  @getuserinfo="toGoodsCart"
	  class="goods-cart-btn"
	  :class="{'position-unset':position=='unset'}"
	  <!-- #ifdef H5 -->
	  @click="toGoodsCart"
	  <!-- #endif -->
	>
	<view class="number-icon" v-if="logined && allTotal > 0">{{allTotal}}</view>
	</button>
</template>

<script>
export default {
	data() {
		return {
			// pageHeight: window.innerHeight - 94,
			pageHeight: uni.getSystemInfoSync().windowHeight - 94,
			goodsCartBtnShow: true,
		}
	},
	props: {
		position: {
			type: String,
			default: ''
		}
	},
	computed: {
		logined() {
			return this.$globalData.state.token ? true : false
		},
	  allTotal() {
	    return this.$globalData.shoppingCarNum < 100 ? this.$globalData.shoppingCarNum : '99+'
	  }
	},
	methods: {		
		toGoodsCart(e){
			this.$Login.login({
				wxObj: e,
				site: '/pages/cart/goodsCart',
				noRefresh: true,
				success: () => {
					this.$routeUtils.navigateTo({
						url: '/pages/cart/goodsCart',
					})
				}
			})
		}
	}
};
</script>

<style lang="scss" scoped>
	.goods-cart-btn{
		width: 88rpx;
		height: 88rpx;
		background-image: url('https://ss.migudm.cn/malleoc/public/goods_cart_btn.png');
		background-size: contain;
		background-repeat: no-repeat;
		position: fixed;
		bottom: 250rpx;
		right: 30rpx;
		z-index: 10;
		margin-bottom: env(safe-area-inset-bottom);
		.number-icon{			
			font-size: 18rpx;
			font-weight: 500;
			color: #FFFFFF;
			background: #FF004F;
			border: 1px solid #FFFFFF;
			border-radius: 24rpx;
			position: absolute;
			min-width: 24rpx;
			height: 24rpx;
			line-height: 24rpx;
			box-sizing: content-box;
			top: 18rpx;
			left: 48rpx;
			text-align: center;
		}
	}
	.position-unset{
		    position: relative;
		    bottom: auto;
		    right: auto;
	}
</style>
